<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TestBDmap</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=APLH4K59vaDPXLt8iDWD75z5xml5oqyj">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">


        var map = new BMap.Map("container");          // 创建地图实例
        var point = new BMap.Point(118.14, 24.5);  // 创建点坐标
        map.centerAndZoom(point, 14);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //鼠标滚轮
        map.addControl(new BMap.NavigationControl());
        //可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
//    map.addControl(new BMap.MapTypeControl());//地图类型，右上角，支持地图，卫星，三维
//    var marker = new BMap.Marker(point);        // 创建标注
//    map.addOverlay(marker);
//    var opts = {
//        width : 250,     // 信息窗口宽度
//        height: 100,     // 信息窗口高度
//        title : "Hello"  // 信息窗口标题
//    }
//    var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
//    map.openInfoWindow(infoWindow, point);      // 打开信息窗口
        var driving = new BMap.WalkingRoute(map, {
            renderOptions: {
                map: map,
                autoViewport: true
            }
        });
        driving.search("联通营业厅");
//    var geolocation = new BMap.Geolocation();
    var local;
//    geolocation.getCurrentPosition(function(result){
//        if(this.getStatus() == BMAP_STATUS_SUCCESS){
//            local = result.point;
//            var mk = new BMap.Marker(result.point);//创建一个覆盖物
//            mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//            map.addOverlay(mk);//增加一个标示到地图上
//            map.panTo(result.point);
//            latitude  = result.point.lat;//获取到的纬度
//            longitude = result.point.lng;//获取到的经度
//        }
//    });
    //定位控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
//        var address = '';
//        address += e.addressComponent.province;
//        address += e.addressComponent.city;
//        address += e.addressComponent.district;
//        address += e.addressComponent.street;
//        address += e.addressComponent.streetNumber;
        //获取当前定位经纬度
        local = e.point;
    });
    function bus() {
        var transit = new BMap.TransitRoute(map, {
            renderOptions: {map: map}
        });
        transit.search(local, point);
    }
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    var str = '<div><p>联通营业厅xxxx</p><button id="bus" onclick="bus();">公交导航</button><button id="car">驾车导航</button><button id="walk">步行导航</button></div>';
    var infoWindow = new BMap.InfoWindow(str);
    marker.addEventListener("click", function(e){
        this.openInfoWindow(infoWindow);
    });

    geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);



</script>

</body>
</html>